//使用构造函数初始化一个实例对象
/*
const xhr = new XMLHttpRequest()
xhr.open('GET', 'http://wthrcdn.etouch.cn/weather_mini?city=%E6%88%90%E9%83%BD');
xhr.send()
console.log('程序开始')
xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){
        console.log('请求已经完成')
        const res = xhr.responseText
        console.log(res)
        const data = JSON.parse(res)
        console.log(data)
    }
}
console.log('程序结束')
*/
/*
const btn = document.getElementById('btn')
console.log('程序开始')
btn.onclick = function(){
    console.log('点击了下')
}
console.log('程序结束')
*/
/**
 * 1.给按钮添加事件，获取输入框内容
 * 2.根据输入的内容拼接url,发送ajax请求
 * 3.解析返回的数据，JSON字符串解析为对象
 * 4.用返回的数据渲染到页面
 */
const cityEle = document.querySelector('.city')
const tipEle = document.querySelector(".tip")
const tbody = document.querySelector('tbody')
const btn = document.getElementById('btn')
const ipt = document.getElementById('city')
//测试数据
/*
const weatherData = {
    "yesterday": {
        "date": "4日星期四",
        "high": "高温 29℃",
        "fx": "西南风",
        "low": "低温 19℃",
        "fl": "<![CDATA[2级]]>",
        "type": "多云"
    },
    "city": "成都",
    "forecast": [{
        "date": "5日星期五",
        "high": "高温 36℃",
        "fengli": "<![CDATA[2级]]>",
        "low": "低温 21℃",
        "fengxiang": "南风",
        "type": "多云"
    }, {
        "date": "6日星期六",
        "high": "高温 31℃",
        "fengli": "<![CDATA[2级]]>",
        "low": "低温 21℃",
        "fengxiang": "东南风",
        "type": "阴"
    }, {
        "date": "7日星期天",
        "high": "高温 29℃",
        "fengli": "<![CDATA[2级]]>",
        "low": "低温 21℃",
        "fengxiang": "东风",
        "type": "阵雨"
    }, {
        "date": "8日星期一",
        "high": "高温 27℃",
        "fengli": "<![CDATA[2级]]>",
        "low": "低温 21℃",
        "fengxiang": "西北风",
        "type": "阵雨"
    }, {
        "date": "9日星期二",
        "high": "高温 29℃",
        "fengli": "<![CDATA[2级]]>",
        "low": "低温 21℃",
        "fengxiang": "东南风",
        "type": "多云"
    }],
    "ganmao": "感冒易发期，外出请适当调整衣物，注意补充水分。",
    "wendu": "36"
}
*/
/**绑定点击事件 */
btn.onclick = function(){
    // const res = request()
    // console.log(res)
    //获取输入框输入的城市
    const city = ipt.value
    request(city)
}
/**
 * 请求网络函数
 * @param {}  
 */
function request(city) {
    //使用city拼接url
    const url = `http://wthrcdn.etouch.cn/weather_mini?city=${city}`
    //使用XMLHttpRequest实例化一个对象
    const xhr = new XMLHttpRequest()
    //请求方法和请求地址，
    xhr.open('GET', url);
    //请求网络
    xhr.send()
    //监听xhr的状态变化，如果状态为4则说明以及请求成功并返回数据
    let res
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            console.log('请求已经完成')
            //获取返回的数据，字符串格式
            const resStr = xhr.responseText
            // console.log(res)
            //把字符串解析为对象
            res = JSON.parse(resStr)
            console.log(res.data)
            render(res.data)
        }
    }
    
    console.log('reques 执行完毕')
    console.log(res)
    
}
/**
 * 渲染函数，把对象数据渲染到页面
 * @param {Object} data 
 */
function render(data) {
    cityEle.innerText = data.city
    tipEle.innerText = data.ganmao
    const forecast = data.forecast
    const htmlArr = forecast.map(function (item) {
        const fl = /\d{1,2}级/.exec(item.fengli)
        const tr = `
        <tr>
            <td>${item.date}</td>
            <td>${fl}</td>
            <td>${item.fengxiang}</td>
            <td>${item.high}</td>
            <td>${item.low}</td>
            <td>${item.type}</td>
        </tr>`
        return tr
    })
    console.log(htmlArr)
    const trHtml = htmlArr.join('')
    console.log(trHtml)
    tbody.innerHTML = trHtml

}

// render(weatherData)